<template>
  <div class="fxs" :class="{ pb: padding }">
    <div class="text-4 pb">
      {{ title }}
    </div>
    <div class="actions">
      <el-space :size="20">
        <el-button v-if="showAdd" type="primary" :icon="Plus" @click="emit('add')">{{ text }}</el-button>
        <el-tooltip v-if="refresh" placement="top">
          <template #content> 刷新 </template>
          <el-icon class="hover" :size="20" @click="onRefresh"> <Refresh /></el-icon>
        </el-tooltip>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus, Refresh } from '@element-plus/icons-vue'

const props = defineProps({
  /**
   * 标题（必须填写）
   */
  title: { type: String, required: true },
  /**
   * 新增按钮的文本
   */
  text: { type: String, default: '新增' },
  /**
   * 是否隐藏添加按钮(String形式会自动调用hasAuth)
   */
  add: { type: [Boolean, String], default: false },
  /**
   * 是否隐藏刷新按钮
   */
  refresh: { type: Boolean, default: false },
  /**
   * 是否显示默认的padding-bottom（默认是）
   */
  padding: { type: Boolean, default: true }
})

const showAdd = computed(() => {
  if (typeof props.add == 'string') {
    return hasAuth(props.add)
  } else {
    return props.add
  }
})

const emit = defineEmits(['add', 'refresh'])

const getList = inject('getList', undefined)

const onRefresh = () => {
  if (getList) {
    ;(getList as Function)()
  } else {
    emit('refresh')
  }
}
</script>

<style lang="scss" scoped>
.hover {
  &:hover {
    color: var(--ep-color-primary);
  }
}

.pb {
  padding-bottom: var(--ep-card-padding);
}
</style>
